<template>
  <div>
    <i-button :buttonData="buttonData" @btnClick="dialogData.show=true"></i-button>
    <IDialog :dialogData="dialogData">
       <i-form ref="myForm" :dataForm="dataForm"></i-form>
    </IDialog>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IButton, IDialog, IForm } from 'wd-platform-library'
import { ButtonInterFace } from 'wd-platform-library/lib/src/IButton/src/ButtonInterFace'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
interface DataFormInterface {
    workMobile:string;
    id: string;
    appId:string;
    appName: string;
    appSecret: string;
    appDesc: string;
    iconPath: string;
    verify: string;
    status: string;
}
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const myForm = ref()
        // 弹框属性-------------------------------------------------------
        const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await myForm.value.onSubmit().then(async (res: any) => {
                    await sleep(2000)
                    dialogData.onCancel && dialogData.onCancel()
                }).catch(() => { console.log() })
            },
            onCancel: () => {
                myForm.value.resetForm()
                dataForm.form = {
                    workMobile: '',
                    id: '',
                    appName: '',
                    appId: '',
                    appSecret: '',
                    appDesc: '',
                    iconPath: '',
                    verify: '0',
                    status: '0'
                }
                dialogData.show = false
            }
        })
        const buttonData: ButtonInterFace = {
            loading: false,
            label: '弹窗',
            isShow: true,
            Fun: 'btnClick'
        }
        // 表单属性------------------------------------
        const dataForm: FormInterFace<DataFormInterface> = reactive({
            labelWidth: 100, // 文本宽度
            form: {
                workMobile: '',
                id: '',
                appId: '',
                appName: '',
                appSecret: '',
                appDesc: '',
                iconPath: '',
                verify: '0',
                status: '0'
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '工作手机号', // 字段描述信息
                    field: 'workMobile', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入工作手机号',
                            trigger: 'blur'
                        },
                        {
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 11
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用ID', // 字段描述信息
                    field: 'appId', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入应用ID',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 20
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用名称', // 字段描述信息
                    field: 'appName', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入应用名称',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: 'appSecret', // 字段描述信息
                    field: 'appSecret', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入appSecret',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用图标', // 字段描述信息
                    field: 'iconPath', // form 对应字段
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'radio', // form表单类型
                    label: '是否启用', // 字段描述信息
                    field: 'status', // form 对应字段
                    dataList: [
                        {
                            label: '正常',
                            value: '0'
                        },
                        {
                            label: '停用',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'radio', // form表单类型
                    label: '是否验证', // 字段描述信息
                    field: 'verify', // form 对应字段
                    dataList: [
                        {
                            label: '不验证',
                            value: '0'
                        },
                        {
                            label: '验证',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'textarea', // form表单类型
                    label: '应用描述', // 字段描述信息
                    field: 'appDesc', // form 对应字段
                    options: {
                        maxlength: 200
                    }
                }
            ]
        })

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '整体代码',
                    type: 'pre',
                    value: `
<template>
    <div>
        <i-button :buttonData="buttonData" @btnClick="dialogData.show=true"></i-button>
        <IDialog :dialogData="dialogData">
            <i-form ref="myForm" :dataForm="dataForm"></i-form>
        </IDialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IButton, IDialog, IForm } from 'wd-platform-library'
import { ButtonInterFace } from 'wd-platform-library/lib/src/IButton/src/ButtonInterFace'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import { FormInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
interface DataFormInterface {
    workMobile:string;
    id: string;
    appId:string;
    appName: string;
    appSecret: string;
    appDesc: string;
    iconPath: string;
    verify: string;
    status: string;
}
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const myForm = ref()
        // 弹框属性-------------------------------------------------------
        const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: async () => {
                const sleep = (millisecond:number) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true)
                        }, millisecond)
                    })
                }
                await myForm.value.onSubmit().then(async (res: any) => {
                    await sleep(2000)
                }).catch(() => {})
            },
            onCancel: () => {
                myForm.value.resetForm()
                dataForm.form = {
                    workMobile: '',
                    id: '',
                    appName: '',
                    appId: '',
                    appSecret: '',
                    appDesc: '',
                    iconPath: '',
                    verify: '0',
                    status: '0'
                }
                dialogData.show = false
            }
        })
        
      
        const buttonData: ButtonInterFace = {
            loading: false,
            label: '弹窗',
            isShow: true,
            Fun: 'btnClick'
        }
        // 表单属性------------------------------------
        const dataForm: FormInterFace<DataFormInterface> = reactive({
            labelWidth: 100, // 文本宽度
            form: {
                workMobile: '',
                id: '',
                appId: '',
                appName: '',
                appSecret: '',
                appDesc: '',
                iconPath: '',
                verify: '0',
                status: '0'
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '工作手机号', // 字段描述信息
                    field: 'workMobile', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入工作手机号',
                            trigger: 'blur'
                        },
                        {
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 11
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用ID', // 字段描述信息
                    field: 'appId', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入应用ID',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 20
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用名称', // 字段描述信息
                    field: 'appName', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入应用名称',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: 'appSecret', // 字段描述信息
                    field: 'appSecret', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: '请输入appSecret',
                            trigger: 'blur'
                        }
                    ],
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '应用图标', // 字段描述信息
                    field: 'iconPath', // form 对应字段
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'radio', // form表单类型
                    label: '是否启用', // 字段描述信息
                    field: 'status', // form 对应字段
                    dataList: [
                        {
                            label: '正常',
                            value: '0'
                        },
                        {
                            label: '停用',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'radio', // form表单类型
                    label: '是否验证', // 字段描述信息
                    field: 'verify', // form 对应字段
                    dataList: [
                        {
                            label: '不验证',
                            value: '0'
                        },
                        {
                            label: '验证',
                            value: '1'
                        }
                    ]
                },
                {
                    type: 'textarea', // form表单类型
                    label: '应用描述', // 字段描述信息
                    field: 'appDesc', // form 对应字段
                    options: {
                        maxlength: 200
                    }
                }
            ]
        })
     return {
            dataForm,
            myForm,
            buttonData,
            dialogData
        }
    },
    components: {
        IDialog,
        IButton,
        IForm,
    }
})<script>`
                }
            ]
        }
        return {
            dataForm,
            myForm,
            libDocData,
            buttonData,
            dialogData
        }
    },
    components: {
        IDialog,
        IButton,
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
